<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <span style="font-size: 32px;">我是博客</span>
            </el-header>
            <el-main style="background-color: #ec3975;">
                <div class="container-header">
                    <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false">
                        <el-menu-item index="1" @click="gotohome">首页</el-menu-item>
                        <el-menu-item index="2" @click="gotoblog">博文</el-menu-item>
                        <el-menu-item index="3" @click="gotovideo">视频</el-menu-item>
                        <el-sub-menu index="4">
                            <template #title>下载</template>
                            <el-menu-item index="2-1">行业软件</el-menu-item>
                            <el-menu-item index="2-2">电子书下载</el-menu-item>
                            <el-menu-item index="2-3">PCB参考设计</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="5" @click="gotoindustry">行业动态</el-menu-item>
                        <el-menu-item index="6">干货分享</el-menu-item>
                        <el-sub-menu index="7">
                            <template #title>课程</template>
                            <el-menu-item index="7-1">PCB设计一板即成功专栏</el-menu-item>
                            <el-menu-item index="7-2">PCB信仰工艺尺配套课程</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="8">
                            <template #title>店铺</template>
                            <el-menu-item index="8-1">店内商店</el-menu-item>
                            <el-menu-item index="8-2">淘宝店</el-menu-item>
                        </el-sub-menu>
                        <div v-if="!isLoggedIn">
                            <el-sub-menu index="9">
                                <template #title>注册与登录</template>
                                <el-menu-item index="9-1" @click="register">注册</el-menu-item>
                                <el-menu-item index="9-2" @click="login">登录</el-menu-item>
                            </el-sub-menu>
                        </div>
                        <div v-else>
                            <el-sub-menu index="9">
                                <template #title >个人中心</template>
                                <el-menu-item index="9-1" @click="updateavatar">头像更改</el-menu-item>
                                <el-menu-item index="9-2">购物车</el-menu-item>
                                <el-menu-item index="9-3">我的订单</el-menu-item>
                                <el-menu-item index="9-4" @click="gotomycontent">我的账户</el-menu-item>
                                <el-menu-item index="9-5">我的好友</el-menu-item>
                                <el-menu-item index="9-6">收藏夹</el-menu-item>
                                <el-menu-item index="9-7">我的私信</el-menu-item>
                                <el-menu-item index="9-8">通知</el-menu-item>
                                <el-menu-item index="9-9" @click="return_home">退出登录</el-menu-item>
                            </el-sub-menu>
                        </div>
                    </el-menu>
                </div>
            </el-main>
            <router-view></router-view>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { inject, ref, onMounted, Ref } from 'vue'
import { useRouter } from 'vue-router';
const isLoggedIn = inject<Ref<boolean>>('isLoggedIn', ref(false));
const router = useRouter()
const activeIndex = ref('1')
function register() {
    router.push('/register')
}
function login() {
    router.push('/login')
}
function gotohome(){
    router.push('/home')
}
function gotoblog(){
    router.push('/home/blog')
}
function gotovideo(){
    router.push('/home/video')
}
function gotoindustry(){
    router.push('/home/industry')
}
function gotomycontent(){
    router.push('/mycontent')
}
function updateavatar(){
    router.push('/upload')
}
onMounted(() => {
    const storeIndex = localStorage.getItem('activeIndex')
    if (storeIndex) {
        activeIndex.value = storeIndex;
    }
})
function return_home() {
    isLoggedIn.value = false
    localStorage.removeItem('token');
    localStorage.removeItem('phone');
    localStorage.removeItem('activeIndex');
    localStorage.removeItem('isLoggedIn');
    activeIndex.value = '1';
    router.push('/home')
}
</script>
<style scoped>
.el-menu {
    background-color: #ec3975;
}

.el-menu--horizontal>.el-menu-item {
    align-items: center;
    border-bottom: 2px solid transparent;
    color: #ffffff;
    display: inline-flex;
    font-size: larger;
    height: 100%;
    justify-content: center;
    margin: 0;
}

.el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
    border-bottom: 2px solid transparent;
    color: #ec3975;
    height: 100%;
}
.el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
    border-bottom: 2px solid transparent transparent;
    color: #2567eb;
    height: 100%;
}
</style>